<style type="text/css">
p.button-style2 a{
	cursor: pointer;
	display: inline-block;
	height: 2.60em;
	/*margin-top: 1.25em;*/
	padding: 0em 2.25em 0em 1.25em;
	background: url(<?php echo Yii::app()->theme->baseUrl; ?>/images/img03.jpg) repeat right top;
	border-radius: 5px;
	line-height: 2.60em;
	text-decoration: none;
	font-size: 1em;
	color: #FFFFFF;
}
div.3u img{
	height:100px !important;
	margin: 0px 5px;
}
</style>
<?php $this->widget("application.components.LeftColumn", array("page"=>"home")); ?>
					
<div class="9u mobileUI-main-content">
	<div id="content">
		<section id="main-content">
<div class="row divider">
	<div class="create-product" id="create-product" style="display:none;">
		<form action="#" method="post" class="create-form" id="create-form">
			<fieldset>
				<input id="create_title" type="text" name="create_title" placeholder="Tên sản phẩm"/>
				<input id="create_code" type="text" name="create_code" placeholder="Mã sản phẩm"/>
			</fieldset>
			<div class="selectCategory" style="float:left;margin-top:10px;">
				<span>Danh mục sản phẩm:</span>
				<select id="create_category" onchange="attribute();">
					<option value="0">Lựa chọn</option>
					<?php foreach ($category as $key) {?>
					<option value="<?php echo $key->name; ?>"><?php echo $key->name; ?></option>
					<?php } ?>
				</select>
			</div>
			<fieldset class="create_quantity" style="float:right;">
				<label>Số lượng hàng:</label>
				<input id="create_quantity" type="text" style="width: 110px;" name="create_quantity" placeholder="0"/>
			</fieldset>
			<div class="create-attribute" style="margin-top:10px;">
				<fieldset class="attribute" id="nhasanxuat" style="display:none;width:880px;">
					<label>Nhà sản xuất:</label>
					<input id="create_nhasanxuat" type="text" style="width:854px;"/>
				</fieldset>
				<!-- <input id="create_manufacture" type="text" placeholder="Nhà sản xuất"/> -->
				<fieldset class="attribute" id="duongkinh" style="display:none;">
					<label>Đường kính:</label>
					<input id="create_duongkinh" type="text"/>
				</fieldset>
				<fieldset class="attribute" id="vatlieu" style="display:none;">
					<label>Vật liệu:</label>
					<input id="create_vatlieu" type="text">
				</fieldset>
				<fieldset class="attribute" id="loai" style="display:none;">
					<label>Loại:</label>
					<input id="create_loai" type="text"/>
				</fieldset>
				<fieldset class="attribute" id="mausac" style="display:none;">
					<label>Màu sắc:</label>
					<input id="create_mausac" type="text"/>
				</fieldset>
				<fieldset class="attribute" id="mat" style="display:none;">
					<label>Mắt:</label>
					<input id="create_mat" type="text"/>
				</fieldset>
				<fieldset class="attribute" id="khorong" style="display:none;">
					<label>Khổ rộng:</label>
					<input id="create_khorong" type="text"/>
				</fieldset>
				<fieldset class="attribute" id="chieudai" style="display:none;">
					<label>Chiều dài:</label>
					<input id="create_chieudai" type="text"/>
				</fieldset>
				<fieldset class="attribute" id="mat1" style="display:none;">
					<label>Mắt 1:</label>
					<input id="create_mat1" type="text"/>
				</fieldset>
				<fieldset class="attribute" id="mat2" style="display:none;">
					<label>Mắt 2:</label>
					<input id="create_mat2" type="text"/>
				</fieldset>
				<fieldset class="attribute" id="beday" style="display:none;">
					<label>Bề dày:</label>
					<input id="create_beday" type="text"/>
				</fieldset>
				<fieldset class="attribute" id="duongkinhlo" style="display:none;">
					<label>Đường kính lỗ:</label>
					<input id="create_duongkinhlo" type="text"/>
				</fieldset>
				<fieldset class="attribute" id="khoangcachlo" style="display:none;">
					<label>Khoảng cách lỗ:</label>
					<input id="create_khoangcachlo" type="text"/>
				</fieldset>
				<fieldset class="attribute" id="duongkinhday1" style="display:none;">
					<label>Đường kính dây 1:</label>
					<input id="create_duongkinhday1" type="text"/>
				</fieldset>
				<fieldset class="attribute" id="duongkinhday2" style="display:none;">
					<label>Đường kính dây 2:</label>
					<input id="create_duongkinhday2" type="text"/>
				</fieldset>
				<fieldset class="attribute" id="buoc" style="display:none;">
					<label>Bước:</label>
					<input id="create_buoc" type="text"/>
				</fieldset>
				<fieldset class="attribute" id="khoang" style="display:none;">
					<label>Khoảng:</label>
					<input id="create_khoang" type="text"/>
				</fieldset>
			</div>
			<div class="clear"></div>
			<fieldset class="create-price" style="float:left;width:60%;">
				<label>Giá:</label>
				<input id="create_price" type="text" placeholder="0" style="width: 172px;"/> trên một
				<input id="create_unit" type="text" >
			</fieldset><br>
			<div class="clear"></div>
			<p>Mô tả sản phẩm</p>
			<textarea style="float:left;width:99%;" id="create_description"></textarea>
			<p class="button-style2"><a style="float:right;margin-top: 1.25em;" onclick="createcomplete();">Hoàn thành</a></p>
		</form>
	</div>
    <?php 
        $this->widget('zii.widgets.CListView', array(
        'dataProvider'=>$dataProvider,
        'itemView'=>'_item', 
        //'template'=>'<br><br>{pager}<br/>{items}<br/>{pager}',
        ));
    ?>	
</div>
		</section>
	</div>
</div>
<script type="text/javascript">
function createcomplete() {
	var title 		= $("#create_title").val();
	var category 	= $("#create_category").val();
	var price 		= $("#create_price").val();
	var unit 		= $("#create_unit").val();
	var code 		= $('#create_code').val();
	var quantity 	= $("#create_quantity").val();
	var description = $("#create_description").val();

	var nhasanxuat 	= $("#create_nhasanxuat").val();
	var duongkinh 	= $("#create_duongkinh").val();
	var vatlieu 	= $("#create_vatlieu").val();
	var loai 		= $("#create_loai").val();
	var mausac 		= $("#create_mausac").val();
	var mat 		= $("#mat").val();
	var khorong 	= $("#khorong").val();
	var chieudai 	= $("#chieudai").val();
	var mat1 		= $("#mat1").val();
	var mat2 		= $("#mat2").val();
	var beday 		= $("#beday").val();
	var duongkinhlo = $("#duongkinhlo").val();
	var khoangcachlo 	= $("#khoangcachlo").val();
	var duongkinhday1 	= $("#duongkinhday1").val();
	var duongkinhday2 	= $("#duongkinhday2").val();
	var buoc 		= $("#buoc").val();
	var khoang 		= $("#khoang").val();

	if(title == "" || category == 0 || price == "" || unit == "" || code =="" || quantity == "") {
		alert("Vui lòng nhập đầy đủ thông tin sản phẩm!");
	} else{
		$.ajax({
			url: "<?php echo Yii::app()->createUrl('/Products/products/create'); ?>",
			type: 'post',
			data: {title : title,
				category : category,
				code : code,
				price : price,
				description : description,
				unit : unit,
				quantity: quantity,
				nhasanxuat : nhasanxuat,
				duongkinh : duongkinh,
				vatlieu : vatlieu,
				loai : loai,
				mausac : mausac,
				mat : mat,
				khorong : khorong,
				chieudai : chieudai,
				mat1 : mat1,
				mat2 : mat2,
				beday : beday,
				duongkinhlo : duongkinhlo,
				khoangcachlo : khoangcachlo,
				duongkinhday1 : duongkinhday1,
				duongkinhday2 : duongkinhday2,
				buoc : buoc,
				khoang : khoang,
			},
			success: function(data) {
				document.getElementById("create-form").reset();
				//alert("Tạo sản phẩm thành công");
				$(".row").html(data);
			}
		});
	}
}
function attribute () {
	var e = document.getElementById("create_category");
    var f = e.options[e.selectedIndex].value; 
	if (f == "Dây") {
		$(".attribute").hide();
		document.getElementById("nhasanxuat").style.display = "block";
		document.getElementById("duongkinh").style.display = "block";
		document.getElementById("vatlieu").style.display = "block";
	}
	if (f == "Nhôm") {
		$(".attribute").hide();
		document.getElementById("nhasanxuat").style.display = "block";
		document.getElementById("loai").style.display = "block";
		document.getElementById("mausac").style.display = "block";
	}
	if (f == "Phụ kiện") {
		$(".attribute").hide();
		document.getElementById("mausac").style.display = "block";
	}
	if (f == "Lưới dây đan") {
		$(".attribute").hide();
		document.getElementById("nhasanxuat").style.display = "block";
		document.getElementById("vatlieu").style.display = "block";
		document.getElementById("duongkinh").style.display = "block";
		document.getElementById("mat").style.display = "block";
		document.getElementById("khorong").style.display = "block";
		document.getElementById("chieudai").style.display = "block";
	}
	if (f == "Lưới đan lượn sóng") {
		$(".attribute").hide();
		document.getElementById("nhasanxuat").style.display = "block";
		document.getElementById("vatlieu").style.display = "block";
		document.getElementById("duongkinh").style.display = "block";
		document.getElementById("mat").style.display = "block";
		document.getElementById("khorong").style.display = "block";
		document.getElementById("chieudai").style.display = "block";
	}
	if (f == "Lưới hàn") {
		$(".attribute").hide();
		document.getElementById("nhasanxuat").style.display = "block";
		document.getElementById("vatlieu").style.display = "block";
		document.getElementById("duongkinh").style.display = "block";
		document.getElementById("mat1").style.display = "block";
		document.getElementById("mat2").style.display = "block";
		document.getElementById("khorong").style.display = "block";
		document.getElementById("chieudai").style.display = "block";
	}
	if (f == "Lưới ngăn sương") {
		$(".attribute").hide();
	}
	if (f == "Tấm đục lỗ") {
		$(".attribute").hide();
		document.getElementById("nhasanxuat").style.display = "block";
		document.getElementById("vatlieu").style.display = "block";
		document.getElementById("beday").style.display = "block";
		document.getElementById("duongkinhlo").style.display = "block";
		document.getElementById("khoangcachlo").style.display = "block";
		document.getElementById("khorong").style.display = "block";
		document.getElementById("chieudai").style.display = "block";
	}
	if (f == "Lưới băng tải") {
		$(".attribute").hide();
		document.getElementById("nhasanxuat").style.display = "block";
		document.getElementById("vatlieu").style.display = "block";
		document.getElementById("duongkinhday1").style.display = "block";
		document.getElementById("duongkinhday2").style.display = "block";
		document.getElementById("buoc").style.display = "block";
		document.getElementById("khoang").style.display = "block";
		document.getElementById("khorong").style.display = "block";
		document.getElementById("chieudai").style.display = "block";
	}
	if (f == "Cửa lưới") {
		$(".attribute").hide();
		document.getElementById("nhasanxuat").style.display = "block";
		document.getElementById("khorong").style.display = "block";
		document.getElementById("chieudai").style.display = "block";
	}
}
</script>